How To Add A Background Image To WordPress Login Page?
February 4th, 2017 | by Ravi Chahar || 17 Comments |
To customize the login page of your WordPress website, you can do a lot of things.
You can customize WordPress login page background, you can change login error message and many others things.
Have you ever thought to add an attractive background image? Yes, you can give a new look to your login page with a custom image.
Many people use the plugins for the customization, but here you will learn the easiest method with a few lines of the code.
To add a background image to WordPress login page, you just have to add a WordPress function consisting the path of the image.
Find And Edit The functions.php file of Your WordPress Theme.
You should know that for a WordPress theme, the functions.php file is one of the most important files.
You can add new features to your website using this file.
To give a better design to your login page, use this file.
You can open it from your WordPress admin panel. Go to Appearance>>Editor>>functions.php file.
If you’re not able to login then access it from the cPanel of the web hosting account.
Go to cPanel>>file manager>>wp-content>>themes>>theme name>>functions.php file.
Open the file and place the code.
echo ‘<style type=”text/css”>
body.login{
background-image: url( “http://example.com/wp-uploads/image.png” )!important;
}
</style>’;
}
add_action(‘login_head’, ‘login_background_image’);
This is an example of the code which would help you.
NOTE:- You have to replace the path of the image with the real path where you upload that image. Whether you upload the image to your media library or add it in the theme folder.
The path of the image should be correct.
It’s always recommended to choose the image of the bigger size so that it can fit the whole screen.
If you use any image of the narrow dimensions then it will get repeated. The normal dimensions of a computer screen are 1920px×1080px
Suppose one of your users have an HD screen computer and you add a smaller image then it won’t look good.
After adjusting the path and the image, save the code and you will see the result.
You have successfully added a custom background image to your WordPress login page.
Did You face Any Problem During The Process?
Many bloggers are afraid of using the codes. But if you do it carefully then you can do a lot of things with this CMS.
The above-shown code can help you add a background image to WordPress login page without creating any separate file.
Many users add a new file just to add this code, but what’s the need?
Did that code work for you? Did you face any problem? If you do then feel free to contact us.
You can also connect with us on Twitter, LinkedIn, and Facebook.
Related Posts
17 comments
Leave a Reply
Ravi,
Great bro. Seems easy to do now as you have written the full code. You made it simple. I will surely apply it.
Thanks for the awesomest info ?
Hey Atish,
The code consists the path of the images present in the image folder. Many people drop it somewhere else. You just have to edit the path and an attractive image will appear.
Thanks for stopping by.
Enjoy your weekend.
~Ravi
Hi Ravi,
This is a handy little resource here. I’m sure many people are tired of their all white spaced login page and would love to know how to spice it up!
I’ll be sharing this.
Cheers mate
Hey Matthew,
People want some spark and adding an image can help. Though most of the people try to find the plugins but I always prefer manual methods.
Hope this will work for you.
Thanks for taking the time to share.
Have a wonderful day.
~Ravi
Hey Ravi,
We know very well that our WordPress sites are higly customizable and we can add lot of features – due to this reason people love Wp.
It is absolutely good tutorial and people love to add a background image because it glorify the site status. Eventually, thanks for sharing your healthy thought with us.
With best regards,
Amar kumar
Hi Amar,
To enhance the appearance of the login page, many website users add an image. It puts a positive impact on your readers.
Thanks for taking the time to spread your words.
Enjoy your day.
~Ravi
Hey Ravi..
That’s amazing, I have learned this but I need something more from you please also add how to change the wordpress login logo. By the way I’m using the plugin and my page load is increased.
I want to reduce that from the custom code please share if you have already been write on this topic too ?
Keep sharing the WP tips..
Hi Junaid,
I have already written a tutorial about login logo. Just search “login logo” and you will find the guide. It’s similar the code shown in here. But you know that WordPress has different functions to target different locations.
Enjoy your stay.
~Ravi
Hey Ravi
Thanks for sharing. This is awesome. WordPress is fully customizable and full of creativity. Let’s make the login screen looks awesome.
Hi Ravi,
Interesting topic! thanks for the code to insert the background image to the WP login.
For security purpose, I have hidden my WP login page and yes, it can be seen by me only. However, I would like to add a motivational picture to refresh myself and keep blogging with passion.
Keep your good work!
Hey Nirmala,
WordPress security is always a matter of concern.
And I like the idea of adding a motivational quote so that you get motivated whenever you open the login page.
Thanks for stopping by.
Enjoy your day.
~Ravi
Hello Ravi,
That is a good little trick, thanks for sharing, now maybe we can add more meaning to the users who are trying to sign up.
Thanks
Praveen
Hey,
Really nice design tips. Adding custom image will be a fun ?
Thanks for sharing buddy.
-Ashutosh
Hi Ashutosh,
Glad to know that it seems helpful to you.
Thanks for stopping by.
Enjoy your day.
~Ravi
instead of implementing this in my functions.php file, I would love to have this functionality in my plugin so that i can carry this with any theme. Nice work ravi. Keep it up
Hello, Ravi.
Thanks for sharing your insights. This is one good reason why I always think you as a WordPress wizard.
It’s always good to customize our website so that it brings something of a novelty. looking forward to seeing a lot of similar articles from you.
Hi Nishant,
It’s good to hear such kind words from you. Dealing with your WordPress website is easy if you enjoy it.
Customizing the login page is good if you’re running a multiauthor website.
Thanks for stopping by.
~Ravi